<script setup lang="ts">
import { CommentAddReq, CommentSource, CommentTreeDto } from '@/api/comment/type'
import useStore from '@/store'
import { allEmoji, EmojiItem, findItemByLabel } from '@/components/emoji/emoji'
import { PropType } from 'vue'

const store = useStore()

const props = defineProps({
  dataList: {
    type: Array as PropType<CommentTreeDto[]>,
    required: true,
    default: () => []
  },
  articleId: {
    type: Number,
    required: false,
    default: () => null
  },
  source: {
    type: String as PropType<CommentSource>,
    default: null
  }
})

const { dataList } = toRefs(props)

/**
 * 提示文本
 */
const placeholderValue = ref('')

/**
 * 评论提交按钮值
 */
const btnValue = ref('发布')

const emit = defineEmits(['listComment', 'submitComment', 'deleteComment'])

function deleteComment(item: CommentTreeDto) {
  emit('deleteComment', item)
}
function listComment() {
  emit('listComment')
}
function submitComment(val: CommentAddReq) {
  emit('submitComment', val)
}

/**
 * 文本表情处理
 * @param text
 */
function parseEmojis(text: string) {
  const emojiList: EmojiItem[] = allEmoji()
  // 使用正则表达式匹配表情符号，并替换为对应的图片标签
  return text.replace(/\[[^[\]]+]/g, (match: string) => {
    const emojiI = findItemByLabel(match, emojiList)
    if (emojiI) {
      return `<img src="${emojiI.img}" alt="${match}" style="width: 20px;"/>`
    }
    return match // 如果未找到对应的表情图片，则保留原始文本
  })
}

/**
 * 评论回复点击
 * @param item
 */
function replyClick(item: CommentTreeDto) {
  item.replyInputShow = !item.replyInputShow
  placeholderValue.value = `回复 @${item.username}`
}
</script>

<template>
  <div v-for="(i, k) in dataList" :key="k" class="comment-list">
    <div class="head-avatar">
      <img :src="i.avatar" :alt="i.username" />
    </div>
    <div class="comment-list-right">
      <CommentTitle :comment="i" />
      <!--评论信息-->
      <div class="content">
        <span class="comment-content" v-html="parseEmojis(i.content)"></span>
      </div>
      <!--评论操作框-->
      <div class="comment-operation">
        <div class="reply-btn" @click="replyClick(i)">
          <span class="text-sm">回复</span>
        </div>
        <div v-if="store.userId == i.userId" class="reply-btn" @click="deleteComment(i)">
          <span class="text-sm">删除</span>
        </div>
      </div>
      <!--回复-->
      <CommentInput
        v-if="i.replyInputShow"
        :placeholder-value="placeholderValue"
        :btn-value="btnValue"
        :article-id="articleId"
        :parent-id="i.id"
        :source="source"
        @submit-comments="submitComment"
      ></CommentInput>
      <!--子评论-->
      <CommentItem
        v-if="i.children && i.children.length > 0"
        :article-id="articleId"
        :data-list="i.children"
        :source="source"
        @list-comment="listComment"
        @delete-comment="deleteComment"
        @submit-comment="submitComment"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment-list {
  display: flex;
  justify-content: space-between;
  .head-avatar {
    width: 40px;
    height: 40px;
    margin-right: 12px;
    img {
      width: 100%;
      border-radius: 50%;
    }
  }
  .comment-list-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    .content {
      border-radius: 5px;
      padding: 10px;
      background-color: var(--comment-bgc);
      margin-top: 5px;
      line-height: 20px;
      .comment-content {
        display: flex;
      }
    }
    .comment-operation {
      display: flex;
      margin: 10px 0;
      line-height: 22px;
      font-size: 14px;
      color: #909399;
      div {
        display: flex;
        align-items: center;
        margin-right: 10px;
      }
      span {
        margin-left: 5px;
      }
      .reply-btn {
        cursor: pointer;
        &:hover {
          color: rgb(30, 128, 255);
        }
      }
    }
  }
}
</style>
